/* protoanimate.js
 * 
 * 
 */
function parseColor(color) {
	if (color.indexOf('rgb') == 0) {
		var color = color.split('(')[1].split(')')[0].split(', ');
	} else if (color.indexOf('#') == 0) {
		var color = [parseInt(color.slice(1,3), 16), parseInt(color.slice(3,5), 16), parseInt(color.slice(5,7), 16)];
	}
	return [parseInt(color[0]), parseInt(color[1]), parseInt(color[2])];
}

function colorToHex(color) {
	color = Math.floor(color[0])*256*256 + Math.floor(color[1]) * 256 + Math.floor(color[2]);
	color = '000000' + color.toString(16);
	return color.slice(color.length - 6);
}

function AnimationFactory(start, end, time, interval, interpolator, interpolators, set_props) {
	f = function(element) {
		if (start)
			element.setStyle(start);
		return element.animate(end, time, interval, interpolator, interpolators, set_props);
	}
	return f;
}

(function () {
	//TODO: Inject a test for jquery's css vs prototypes get/set style to remove dependancy on either library
	var oldSetStyle = Element.setStyle;
	var oldGetStyle = Element.getStyle;
	Element.addMethods({
		animate: function(element, properties, time, interval, interpolator, interpolators, set_props) {
			set_props = set_props ? set_props : "setStyle";
			var end_props = {};
			var start_props = {};
			for (var key in properties) {
				if (properties[key].indexOf('#') == 0) {
					var color = parseColor(properties[key]);
					end_props['__rgb_r_' + key] = color[0];
					end_props['__rgb_g_' + key] = color[1];
					end_props['__rgb_b_' + key] = color[2];
					var color = parseColor(element.getStyle(key));
					start_props['__rgb_r_' + key] = color[0];
					start_props['__rgb_g_' + key] = color[1];
					start_props['__rgb_b_' + key] = color[2];
				} else {
					end_props[key] = properties[key];
					start_props[key] = element.getStyle(key);
				}
			}
				
			interpolator = Interpolate(start_props, end_props, interpolator, interpolators);
			return new FixedIntervalometer(time, interval, function(position) {
				element[set_props](interpolator(position));
			});
		},
		// Extend setStyle to handle "__rgb_r_backgroundColor" (_r_,_g_,_b_) so we can animate colors nicely
		// Requires that you set all __rgb_r_xxxxx in one 'styles' object
		setStyle: function(element, styles) {
			oldSetStyle(element, styles);
			rgb_styles = {};
			for (var key in styles) {
				if (key.indexOf('__rgb_') == 0) {
					var root_key = key.slice(8);
					if (!rgb_styles[root_key])
						rgb_styles[root_key] = {};
					rgb_styles[root_key][key.slice(6,7)] = styles[key];
					if (rgb_styles[root_key].r && rgb_styles[root_key].g && rgb_styles[root_key].b) {
						var key = {}; key[root_key] = '#' + colorToHex([rgb_styles[root_key].r, rgb_styles[root_key].g, rgb_styles[root_key].b]);
						oldSetStyle(element, key);
					}
				}
			}
		},
		// the reverse, exteneded to allow __rgb_r_backgroundColor (_r_, _g_, _b_)
		getStyle: function(element, property) {
			if (property.indexOf('__rgb_')==0) {
				var color = parseColor(oldGetStyle(element, property.slice(8)));
				return {'r':color[0], 'g':color[1], 'b':color[2]}[property.slice(6,7)];
			} else
				return oldGetStyle(element, property);
		}
	});
})();
